<template>
	<div class="root">
		<div class="container">
			<div class="backimg"><img :src="cover" alt=""><span class="maintitle">{{title}}</span></div>
				<div class="content" >
					<div class="title">功能评估</div>
					<van-empty description="暂时没有数据" v-if="action==''&&attitude==''&&assessment==''" />
					<div v-if="action!=''" class="card">
						<div class="circle"></div>
						<div class='circle'></div>
						<div class="card-item">
							<div class="card-title" >姿态评估</div>
							<div class="content-box"  v-for="(item,index) in action" :key="index">
								<div class="name1" v-if="item.title">{{item.title}}</div>
								<div class="detail1" v-if="item.content">{{item.content}}</div>
							</div>
						</div>
					</div>
					<div v-if="attitude!=''" class="card">
						<div class="circle"></div>
						<div class='circle'></div>
						<div class="card-item">
							<div class="card-title" >动作评估</div>
							<div class="content-box"  v-for="(item,index) in attitude" :key="index">
								<div class="name1" v-if="item.title">{{item.title}}</div>
								<div class="detail1" v-if="item.content">{{item.content}}</div>
							</div>
						</div>
					</div>
					<div v-if="assessment!=''" class="lastcard">
						<div class="circle"></div>
						<div class='circle'></div>
						<div class="card-item">
							<div class="card-title" >水中运动能力评估</div>
							<div class="content-box"  v-for="(item,index) in assessment" :key="index">
								<div class="name1" v-if="item.title">{{item.title}}</div>
								<div class="detail1" v-if="item.content">{{item.content}}</div>
							</div>
						</div>
					</div>
					<div class="btn" @click="begin">开始评估</div>
				</div>
		</div>
	</div>
</template>

<script>
import { Toast } from 'vant';
	export default{
		data(){
			return{
				show:true,
				title:'',
				cover:'',
				reportList:[],
				action:[],
				attitude:[],
				assessment:[]
			}
		},
		methods:{
			begin(){
				this.$router.push('/attitude?id='+this.$route.query.id+'&user_id='+this.$route.query.user_id)
			},
			getList(){
				let openid = localStorage.getItem('openid')
				this.$axios.post('assessment/assmessment_list',{openid:openid,id:this.$route.query.id})
				.then(res => {
					let data = res.data.data
					for (var index in data){
						if(data[index].type == 0){
							this.action.push(data[index])
						}else if(data[index].type == 2){
							this.attitude.push(data[index])
						}else{
							this.assessment.push(data[index])
						}
					}
					console.log(this.action)
				})
				.catch(err=>{
					console.log(err)
				})
			}
		},
		created() {
			this.getList()
			this.title = this.$route.query.title
			this.cover = this.$route.query.cover
		}
	}
</script>

<style scoped lang="less">
	.root{
		.container{
			overflow: hidden;
			.backimg{
				width: 100%;
				height: 13rem;
				overflow: hidden;
				.maintitle{
					position: absolute;
					top:5rem;
					left: 40%;
					font-size: 1.3rem;
					color: #fff;
				}
				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.content{
				width: 100%;
				position: relative;
				z-index: 9;
				background-color: #fff;
				margin-top: -2rem;
				border-top-left-radius: 2rem;
				padding-left: 2rem;
				padding-bottom: 8rem;
				.btn{
					width: 90vw;
					height: 3.5rem;
					background: linear-gradient(to right,#1FC9D2,#0383C4);
					border-radius: 3rem;
					position: absolute;
					bottom:2rem;
					left: 5vw;
					font-size: 1.5rem;
					color: #fff;
					text-align: center;
					line-height: 3.5rem;
				}
				.title{
					font-size: 1.3rem;
					font-weight: 600;
					margin: 1.5rem 0 4rem 0;
				}
				.lastcard{
					border-left:.15rem solid #fff!important;
					margin-bottom: 0!important;
					padding-bottom: 0!important;
				}
				.card::after{
					content: '';
					width: 0;
					border-left:2px dashed #1FCAD2;
					// border-bottom: 2px dashed #f40;
					// border-top: 2px dashed #f40;
					// border-right: 2px dashed #f40;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
				.card,.lastcard{
					position: relative;
					box-sizing: border-box;
					width: 85vw;
					float: right;
					margin-right: 4rem;
					min-height: 10rem;
					margin-bottom: 3rem;
					padding-left: 1.5rem;
					padding-bottom: 1.5rem;
					border-left:2px dashed #1FCAD2;
					// border-bottom: 2px solid #f40;
					// border-top: 2px solid #f40;
					// border-right: 2px solid #f40;
					// border-left:.15rem dashed #1FCAD2;
					.circle{
						width: .8rem;
						height: .8rem;
						border: .25rem solid #1FCAD2;
						border-radius: 1rem;
						position: absolute;
						left: -.65rem;
						top: -2rem;
						z-index: 9;
					}
					.lastcircle{
					}
					.card-item{
						position: relative;
						margin-top: -3rem;
						border-radius: 1rem;
						overflow: hidden;
						padding: 1rem 0 1rem 2rem;
						box-shadow: .1rem .1rem .5rem #eee,
												-.1rem .1rem .5rem #eee;
						
						
					}
					.card-title{
						text-align: left;
						font-weight: 600;
						font-size: 1.2rem;
						position: relative;
						text-indent: .5rem;
						margin-bottom: 1rem;
						// 文字渐变 方式一
						background-image:-webkit-linear-gradient(right,#0383C4,#1FCAD2);
						-webkit-background-clip:text;
						-webkit-text-fill-color:transparent;
						// 文字渐变 方式二
						// background: linear-gradient(to right, #0383C4,#1FCAD2);
						// -webkit-background-clip: text;
						// color: transparent;
						// 方式三
						// color: red;
					}
					// 方式三
					// .card-title:before{
					// 		content: attr(text);
					// 		position: absolute;
					// 		z-index: 10;
					// 		color:pink;
					// 		-webkit-mask:linear-gradient(to left, red, black );
					// }
					// .overline{
					// 	position: absolute;
					// 	border-left: .15rem dashed #1FCAD2;
					// 	width: 2rem;
					// 	height: 100%;
					// 	top: 20%;
					// 	left: -3.5rem;
					// 内容盒子
					.content-box{
						background:linear-gradient(to right,#F0F1F5,#F7F7F9) ;
						padding: .5rem;
						.name1{
							font-size:1.1rem;
							margin-bottom: .5rem;
						}
						.detail1{
							font-size:1rem;
							margin-bottom: .5rem;
							color:#aaa;
						}
					}
				}
			}
		}
	}
</style>
